<template>
    <div class="mb">
        <p class="content">
            {{money}}元/{{unit}} <span>{{name}}</span>
        </p>
        <p>套餐编号: **** **** **** 5506</p>
        <p v-if="expire">2023-05-24 10:56:21 到期</p>
    </div>
</template>

<script setup>
const props = defineProps({
    money: 0,
    unit: '',
    name: '',
    expire: false
})

</script>

<style scoped>
    .mb{       
        margin: 0 auto;
        color: rgb(251, 175, 23);
        font-weight: 600;
        background-image: linear-gradient(155deg, #444 30%, #282828 50%);
        box-shadow: inset 0 -3px 2px 0 rgba(51, 51, 51, 0.2), inset 1px 1px 3px -2px rgba(237, 185, 126, 0.8), 1px 1px 1px 0 rgba(255, 255, 255, 0.3), 3px 3px 5px -3px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        transition-delay: 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;     
    }
</style>